import React from 'react';
import classNames from 'classnames';
import { Checkbox, Col, Empty, Form, Row, Select } from 'antd';
import { IRelatedItemSource, IRelatedViewSource } from './FilterConfig';
import styles from '../index.less';

const FormItem = Form.Item;
const { Option } = Select;


interface IRelatedInfoSelectorsProps {
  itemSelectorSource: IRelatedItemSource[]
  viewSelectorSource: IRelatedViewSource[]
  interactionType: string
  onItemCheck: (id: number) => () => void
  onModelOrVariableSelect: (id: number) => (value: string | string[]) => void
  onToggleCheckAll: () => void
}


const RelatedInfoSelectors: React.FC<IRelatedInfoSelectorsProps> = props => {

  const {
    itemSelectorSource,
    viewSelectorSource,
    interactionType,
    onItemCheck,
    onModelOrVariableSelect,
    onToggleCheckAll,
  } = props;
  const checkAll = itemSelectorSource.every((i: any) => i.checked);

  const interactionTypeContent = interactionType === 'column' ? '字段' : '变量';
  const widgetCheckboxes = itemSelectorSource.map((item: any) => (
    <li key={item.id}>
      <Checkbox
        className={classNames('checkbox')}
        checked={item.checked}
        onChange={onItemCheck(item.id)}
      >
        {item.name}
      </Checkbox>
    </li>
  ));
  console.log('viewSelectorSource',viewSelectorSource)
  let viewVariableSelects: any[] = [];
  viewSelectorSource.forEach(v => {
    let value;
    if (Array.isArray(v.fields)) {
      value = v.fields.map((f) => f.name);
    } else if (v.fields) {
      value = v.fields.name;
    }

    viewVariableSelects = viewVariableSelects.concat(
      <div key={v.id}>
        <h4>
          {v.name}
        </h4>
        <Row gutter={4}>
          <Col span={24}>
            <FormItem
              className={styles.formItem}
            >
              <Select
                size='small'
                placeholder='请选择'
                className={styles.selector}
                value={value}
                onChange={onModelOrVariableSelect(v.id)}
                dropdownMatchSelectWidth={false}

              >
                {
                  v.model.map((m: any) => (
                    <Option key={m.name} value={m.name}>{m.name}</Option>
                  ))
                }
              </Select>
            </FormItem>
          </Col>
        </Row>

      </div>,
    );
  });

  if (!viewVariableSelects.length) {
    viewVariableSelects = viewVariableSelects.concat(
      <Empty
        key='empty'
        className={styles.empty}
        image={Empty.PRESENTED_IMAGE_SIMPLE}
      />,
    );
  }

  return (
    <div className={styles.itemSelector}>
      <div className={styles.title}>
        <h2>关联图表</h2>
        <Checkbox
          className={styles.checkAll}
          checked={checkAll}
          onChange={onToggleCheckAll}
        >
          全选
        </Checkbox>
      </div>
      <div className={styles.itemList}>
        <ul>{widgetCheckboxes}</ul>
      </div>
      <div className={classNames({
        [styles.title]: true,
        [styles.subTitle]: true,
      })}>
        <h2>关联{interactionTypeContent}</h2>
      </div>
      <div className={styles.viewSet}>
        <div className={styles.related}>
          {viewVariableSelects}
        </div>
      </div>
    </div>
  );
};

export default RelatedInfoSelectors;
